<template>
	<div class="p-grid">
		<div class="p-col-12">
			<div class="card">
				<h5>树</h5>
				<Tree :value="treeValue" selectionMode="checkbox" :selectionKeys.sync="selectedTreeValue"></Tree>
			</div>
		</div>
		<div class="p-col-12">
			<div class="card">
				<h5>树表</h5>
				<TreeTable :value="treeTableValue" :rowHover="true" selectionMode="checkbox" :selectionKeys.sync="selectedTreeTableValue">
					<template #header>
						文件系统
					</template>
					<Column field="name" header="名称" :expander="true"></Column>
					<Column field="size" header="大小"></Column>
					<Column field="type" header="类型"></Column>
				</TreeTable>
			</div>
		</div>
	</div>
</template>

<script>
	import NodeService from '../api/NodeService'

	export default {
		data() {
			return {
				treeValue: null,
				selectedTreeValue: null,
				treeTableValue: null,
				selectedTreeTableValue: null,
			}
		},
		nodeService: null,
		created() {
			this.nodeService = new NodeService();
		},
		mounted() {
			this.nodeService.getTreeNodes().then(data => this.treeValue = data);
			this.nodeService.getTreeTableNodes().then(data => this.treeTableValue = data);
		},
	}
</script>

<style scoped>

</style>
